<!DOCTYPE html>
<html lang='cn' xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8"/>
    <title>商品列表</title>
    <meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" name="viewport"/>
    <meta content="" name="description"/>
    <meta content="" name="author"/>
    <link th:href="@{/css/bootstrap.min.css}" rel="stylesheet" type="text/css"/>
    <link th:href="@{/css/bootstrap-responsive.min.css}" rel="stylesheet" type="text/css"/>
    <link th:href="@{/css/font-awesome.min.css}" rel="stylesheet" type="text/css"/>
    <link th:href="@{/css/style-metro.css}" rel="stylesheet" type="text/css"/>
    <link th:href="@{/css/style.css}" rel="stylesheet" type="text/css"/>
    <link th:href="@{/css/style-responsive.css}" rel="stylesheet" type="text/css"/>
    <link th:href="@{/css/default.css}" rel="stylesheet" type="text/css" id="style_color"/>
    <link th:href="@{/css/uniform.default.css}" rel="stylesheet" type="text/css"/>
    <link th:href="@{/css/pagination.css}" rel="stylesheet" type="text/css"/>
    <link rel="shortcut icon" th:href="@{/image/favicon.ico}"/>
</head>

<body>
<div class="container-fluid">
    <div class="row-fluid">
        <h3 class="page-title"><i class="fa fa-shopping-bag"></i> 商品管理</h3>
        <ul class="breadcrumb">
            <li>
                <a href="#"><i class="fa fa-home"></i>商品管理</a>
                <i class="fa fa-angle-right"></i>
            </li>
            <li>
                <a href="#">商品列表</a>
            </li>
        </ul>
    </div>
    <div class="row-fluid">
        <div class="portlet">
            <div class="portlet-title">
                <div class="caption">
                    <i class="fa fa-reorder"></i>
                    商品列表
                </div>
                <div class="tools">
                    <button onclick="window.location.href='toAdd.html';" class="btn mini"><i class="fa fa-plus"></i>添加
                    </button>
                </div>
            </div>
            <div class="portlet-body">
                <table id="productTable" class="table table-advance table-hover">
                    <thead>
                    <tr>
                        <th>序号</th>
                        <th>商品图片</th>
                        <th>商品名称</th>
                        <th>商品价格</th>
                        <th>热门商品</th>
                        <th>操作</th>
                    </tr>
                    </thead>
                    <tbody>

                    </tbody>
                </table>
                <div id="Pagination" class="pagination align_right"><!-- 这里显示分页 --></div>
            </div>
        </div>
    </div>
</div>

<script th:src="@{/js/jquery-1.10.1.min.js}" type="text/javascript"></script>
<script th:src="@{/js/jquery-migrate-1.2.1.min.js}" type="text/javascript"></script>
<!-- IMPORTANT! Load jquery-ui-1.10.1.custom.min.js before bootstrap.min.js to fix bootstrap tooltip conflict with jquery ui tooltip -->
<script th:src="@{/js/jquery-ui-1.10.1.custom.min.js}" type="text/javascript"></script>
<script th:src="@{/js/bootstrap.min.js}" type="text/javascript"></script>
<script th:src="@{/js/jquery.slimscroll.min.js}" type="text/javascript"></script>
<script th:src="@{/js/jquery.blockui.min.js}" type="text/javascript"></script>
<script th:src="@{/js/jquery.cookie.min.js}" type="text/javascript"></script>
<script th:src="@{/js/jquery.uniform.min.js}" type="text/javascript"></script>
<script th:src="@{/js/app.js}" type="text/javascript"></script>
<script th:src="@{/js/jquery.pagination.js}" type="text/javascript"></script>
<script th:inline="javascript" type="text/javascript">
    //		<![CDATA[
    var msg = [[${message}]];
    if (msg) {
        alert(msg);
    }

    function edit(id) {
        window.location.href = "toEdit.html?id=" + id;
    }

    function del(id, btn) {
        if (!confirm("是否删除id为" + id + "的商品？")) {
            return;
        }
        $.ajax({
            url: "del.do?id=" + id,
            type: "get",
            success: function (result) {
                if (result.state == 0) {
                    if (result.data == true) {
                        alert("删除成功！");
                        $(btn).parent().parent().fadeOut();
                    } else {
                        alert("删除失败！");
                    }
                } else {
                    alert(result.message);
                }
            }
        });
    }

    var pagetotal;
    $(function () {
        $.ajax({
            url: "getTotal.do",
            type: "get",
            success: function (result) {
                if (result.state == 0) {
                    pagetotal = result.data;
                    $("#Pagination").pagination(pagetotal, {
                        num_edge_entries: 1, //边缘页数
                        num_display_entries: 5, //主体页数
                        callback: pageselectCallback,
                        items_per_page: 15, //每页显示7项
                        prev_text: "前一页",
                        next_text: "后一页"
                    });
                } else {
                    alert(result.message);
                }
            }
        });
    });

    function pageselectCallback(page_index, jq) {
        $.ajax({
            type: "get",
            url: "list.do?pageindex=" + page_index,
            success: function (result) {
                if (result.state == 0) {
                    showList(result.data);
                } else {
                    alert(result.message);
                }
            }
        });
    }

    function showList(data) {
        if (!data || !data.length > 0) {
            return;
        }
        //清空表
        var tbody = $("#productTable tbody").eq(0);
        tbody.html("");
        for (var i = 0; i < data.length; i++) {
            var tr = $("<tr style='display:none;height:50px;'></tr>");
            tr.append($("<td></td>").text(data[i].id));
            var src = data[i].image;
            tr.append($("<td></td>").html("<img style='display: block;height: 50px;max-width: 100%;' src='" + src + "'/>"));
            tr.append($("<td></td>").text(data[i].title));
            tr.append($("<td></td>").text("￥" + data[i].shopPrice));
            if (1 == data[i].isHot)
                tr.append($("<td></td>").html("<b style='color:red;'>是</b>"));
            else
                tr.append($("<td></td>").html("否"));
            tr.append($("<td></td>")
                .append($('<button style="margin-right:20px;" class="btn mini green" onclick="edit(' + data[i].id + ')"><i class="fa fa-edit"></i> 编辑</button>'))
                .append($('<button class="btn mini red" onclick="del(' + data[i].id + ',this)"><i class="fa fa-trash"></i> 删除</button>')));
            tbody.append(tr);
            tr.fadeIn();
        }

    }

    //		]]>
</script>
</body>

</html>